<template>
	<view class="custom-tabbar bg-white">
		<view class="tabbar-content flex align-center">
			<view
				:class="{ 'tabbar-item flex-column justify-center align-center': true, 'text-theme': currentTabIndex === index, 'text-grey': currentTabIndex != index }"
				v-for="(item, index) in tabbarList" :key="index" @tap="handleTabClick(index)">
				<!-- <image class=" tabbar-icon" :src="currentTabIndex === index ? item.selectedIconPath : item.iconPath"
					mode="aspectFit">
				</image> -->
				<view :class="item.icon">

				</view>
				<view class="text-xs mt-sm">
					{{ item.text }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapGetters,
	mapActions
} from 'vuex';

export default {
	name: 'CustomTabbar',
	data() {
		return {
			safeAreaInsets: {
				bottom: 0
			}
		};
	},
	computed: {
		...mapGetters({
			systemInfo: 'system/systemInfo',
			tabbarList: 'tabbar/tabbarList',
			currentTabIndex: 'tabbar/currentTabIndex'
		})
	},
	created() {
		// 获取当前页面
		let pages = getCurrentPages();
		let currentPage = pages[pages.length - 1];
		let index = this.tabbarList.findIndex(item => item.pagePath === '/' + currentPage.route);
		this.handleTabClick(index);
	},
	methods: {
		...mapActions('tabbar', [
			'switchTabbar'
		]),
		// 处理tabbar点击
		handleTabClick(index) {
			if (index === this.currentTabIndex) return;

			this.switchTabbar(index);
			const path = this.tabbarList[index].pagePath;

			// 使用uni-app路由API导航到对应页面
			uni.switchTab({
				url: path,
				fail: () => {
					// 如果switchTab失败（可能不是tabbar页面），尝试使用navigateTo
					uni.switchTab({
						url: path,
						fail: (err) => {
							console.error('页面跳转失败:', err);
							uni.showToast({
								title: '页面不存在',
								icon: 'none'
							});
						}
					});
				}
			});
		},
	}
};
</script>

<style lang="scss">
.custom-tabbar {
	padding-bottom: env(safe-area-inset-bottom);
	width: 100vw;
	border-top: 0.5px solid $uni-border-color;
	padding-top: $uni-spacing-col-md;

	.tabbar-content {
		width: 100%;
		height: 100%;

	}

	.cus-icon {

		font-size: $uni-img-size-base;
	}

	.tabbar-item {
		flex-grow: 1;
		transition: .3s;
		margin-bottom: $uni-spacing-col-md;
	}

	.tabbar-icon {
		width: $uni-img-size-base;
		height: $uni-img-size-base;
	}
}
</style>